body {
    margin: 0;
    display: flex;
    height: 100vh; /* 设置页面高度 */
    transition: all 0.3s ease; /* 平滑过渡效果 */
}

.sidebar { /*导航*/
    width: 20%; /* 左侧导航宽度为页面的五分之一 */
    background: linear-gradient(135deg, #cfe1f5, #eaf1fb);; /* 浅蓝白渐变 */
    color: white;
    padding: 5px;
    box-sizing: border-box;
    position: relative;
}

.content { /*主体内容*/
    width: 80%; /* 主内容区宽度为页面的五分之四 */
    padding: 20px;
    box-sizing: border-box; /* 包含内边距和边框 */
    transition: background-color 0.3s, color 0.3s; /* 背景色和文本颜色的过渡效果 */
    background: linear-gradient(to right, #99CCff, #ffffff);
    position: relative;
}

.hidden {
transition: background-color 0.3s, color 0.3s; /* 背景色和文本颜色的过渡效果 */
    display: none; /* 隐藏导航 */
}

.button1 { /*导航中的按钮样式*/
    display: flex;
    align-items: center; /* 垂直居中对齐 */
    justify-content: flex-start;
    padding: 10px; /* 按钮内边距 */
    margin: 5px 0; /* 上下外边距 */
    border: none; /* 不显示边框 */
    background-color: transparent; /* 背景颜色透明 */
    color: rgb(128, 128, 128); /* 初始文本颜色为灰色 */
    font-size: 16px; /* 字体大小 */
    cursor: pointer; /* 鼠标悬停时为手型光标 */
    border-radius: 5px; /* 圆角半径 */
    transition: background-color 0.3s, color 0.3s; /* 背景色和文本颜色的过渡效果 */
    width: 19.5vw;

}

a {
    text-decoration: none; /* 去掉下划线 */

}

.button1-icon {
    width: 30px; /* 图标宽度 */
    margin-right: 10px; /* 图标与文本之间的间距 */
}


.button1:hover {
    background-color: #d3d3d3; /* 悬停时背景色为浅灰色 */
    color: #336699; /* 悬停时文本颜色变为蓝色 */
    font-weight: bold;

}


.button4 { /*隐藏导航按钮样式*/
    width: 30px; /* 按钮宽度 */
    height: 30px; /* 按钮高度 */
    background-color: #d3d3d3; /* 按钮背景色 */
    border: none; /* 去掉边框 */
    border-radius: 50%; /* 圆形按钮 */
    display: flex; /* 启用flex布局 */
    justify-content: center; /* 水平居中对齐 */
    align-items: center; /* 垂直居中对齐 */
    cursor: pointer; /* 鼠标悬停时变成手型 */
    transition: background-color 0.3s, color 0.3s;
}

.button4:hover {
    background-color: rgb(128, 128, 128);
}

.button4-icon {
    width: 20px; /* 图标宽度 */
    height: 20px; /* 图标高度 */
}
.logo { /*导航左上角的深蓝色方块*/
    left: 0;
    width: 60px; /* 方块的宽度 */
    height: 60px; /* 方块的高度 */
    border-radius: 10px; /* 圆角 */
    margin-right: 10px; /* 方块和标题之间的间距 */
}

.title {
    position: absolute;
    font-size: 20px;
    color: #336699; /* 标题字体大小 */
    font-weight: bold;
    display: inline;
    top: 5px;
    left: 70px;
}

.underline {/*导航中下划线样式*/
    width: 100%; /* 下划线全宽 */
    height: 2px; /* 下划线高度 */
    background-color: rgb(128, 128, 128); /* 灰色下划线 */
}

/*.content {*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*    align-items: center;*/
/*    justify-content: center;*/
/*    height: 100vh;*/
/*}*/

.prediction-success, .prediction-failure {
    background-color: #ffffff; /* 白色背景 */
    border-radius: 15px; /* 圆角效果 */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* 轻微阴影效果 */
    padding: 30px; /* 内边距 */
    width: 80%; /* 宽度，适应屏幕 */
    max-width: 1000px; /* 限制最大宽度 */
    margin: 0 auto; /* 居中 */
    text-align: center; /* 文本居中 */
    margin-top: 150px;
    height: 50%;
    display: flex;
    align-items: center;
    flex-direction: column;  /* 垂直排列 */
    justify-content: space-between;  /* 内容和按钮之间留空 */
    min-height: 300px;  /* 设置一个最小高度，避免内容太少时按钮位置错误 */
}

.status-icon-success {
    width: 100px;
    height: 100px;
    margin-bottom: 20px;
}

.status-icon-failure {
    width: 200px;
    height: 200px;
    /*margin-bottom: 20px;*/
    margin-top: 100px;
}

.noresult {
    font-size: 20px;
    font-weight: bold;
    color: #5d5d5d;
}

.result-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 20px 0;
}

.result-box {
    display: flex;
    justify-content: space-between;
    background-color: #d1e7ff;
    border-radius: 10px;
    padding: 15px;
    font-size: 18px;
    font-weight: bold;
    width: 300px;
}

.button-container {
    margin-top: 20px;
}

.back-button {
    padding: 10px 20px;
    background-color: #0578b9;
    color: white;
    border: none;
    border-radius: 25px;
    cursor: pointer;
    font-size: 20px;
    width: 100%;
}

.back-button:hover {
    background-color: #336699;
}



